import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import './index.scss';
import { imgHost } from '../../util/costant';

class ListItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }
  filter(data) {
    return {
      title: data.title.rendered,
      litpic: `${data.litpic[0][0].split(',')[0]}`,
      excerpt: data.excerpt.rendered.replace(/(<a.*?\/a>)/g, ''),
      date: data.date.substr(0, 10),
      author: data.author,
      id: data.id,
    }
  }
  render() {
    const data = this.filter(this.props.data);

    return (
      <li className="wenchat-item">
        <div className="weichat-pic">
          <Link to={`/article-detail/${data.id}`}><img src={`${imgHost}${data.litpic}`} alt={data.title} /></Link>
        </div>
        <div className="weichat-info">
          <h3 className="weichat-title">
            <Link to={`/article-detail/${data.id}`} >{data.title}</Link>
          </h3>
          <span className="type">
            微信精选
          </span>
          <span className="time">
            {data.date}
          </span>
        </div>
      </li>
    )
  }
}
export default ListItem;
ListItem.propTypes = {
  data: PropTypes.objectOf(Object),
}
